@import '@common/styles/index.scss';

.mainContent {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: calc(100vh - 80px);
  overflow: scroll;
}

.userCenterEditMiddle {
  padding: rem($padding-4n);
  padding-bottom: 0;
  h3 {
    font-size: rem($font-size-middle);
    // margin-bottom: rem(16);
  }
  .userCenterEditItem {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #f4f6f7;
    padding: rem($padding-4n) 0;
    height: rem(52);
    box-sizing: border-box;
    // >div:nth-child(2) {
    //   margin-left: rem($margin-2n);
    // }
  }
  .userCenterEditLabel {
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    // height: rem(36);
    // line-height: rem(36);
    font-size: rem($font-size-base);
    // border-bottom: 1px solid #F4F6F7;
    .userLabelName {
      color: $text-color-regular;
    }
    .userCenterEditWeChat {
      display: flex;
      align-items: center;
      .wxNickname {
        margin-left: rem($margin-4n);
      }
      .linkText {
        color: $primary-color;
        cursor: pointer;
        margin-left: rem($margin-4n);
      }
    }
  }
}

.userCenterEditValue {
  display: flex;
  align-items: center;
  .ucText {
    font-size: rem($font-size-base);
    margin-right: rem($margin-2n);
  }
  :global {
    .dzq-icon {
      font-size: rem($font-size-small) !important;
      color: $text-color-secondary;
    }
  }
}

.userInputContent {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid $comment-bg-color;
  box-sizing: border-box;
  height: rem(52);
  overflow: hidden;
  color: $text-color-primary;
  .uerInputItem {
    height: rem(52);
    line-height: rem(51);
    font-size: rem($font-size-base);
    @include text-ellipsis();
    :global {
      .dzq-icon {
        color: $text-color-secondary;
      }
      .dzq-input {
        width: 100%;
        height: rem(51);
        display: flex;
        align-items: center;
        font-size: rem($font-size-base);
        padding: 0;
      }
      .dzq-input__inner {
        text-align: right;
        border: none;
        font-size: rem($font-size-base);
        margin-top: 0;
        padding-right: 0;
        display: block;
        height: rem(51);
        line-height: rem(51);
        padding: 0;
      }
    }
  }
  .userLabelName {
    color: $text-color-regular;
    margin-right: rem($margin-2n);
    flex-shrink: 0;
    font-size: rem($font-size-base);
  }
}

.userCenterEditBottom {
  height: rem(156);
  padding: rem($padding-4n);
  box-sizing: border-box;
  padding-top: 0;
  h3 {
    margin-top: rem($margin-4n);
    // margin-bottom: rem(16);
    font-size: rem($font-size-middle);
  }
  // &::before {
  //   content: '';
  //   display: block;
  //   height: 10px;
  //   background: #F4F6F7;
  //   margin: 0 rem(-20);
  // }
  .userCenterEditItem {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: rem($padding-4n) rem($padding-5n);
    border-bottom: 1px solid #f4f6f7;
    margin: 0 rem(-$margin-5n) rem($margin-2n);
    height: rem(52);
    box-sizing: border-box;
    :global {
      .dzq-icon {
        font-size: rem($font-size-small) !important;
        color: $text-color-secondary;
      }
    }
  }
  .userCenterEditLabel {
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    // height: rem(36);
    // line-height: rem(36);
    font-size: rem($font-size-base);
    // border-bottom: 1px solid #F4F6F7;
    .userLabelName {
      color: $text-color-regular;
    }
  }
}

#editInfoWrapper .userCenterEditBtn {
  background-color: $white;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  bottom: 0;
  padding: rem($padding-2n) rem($padding-4n) rem($padding-10);
  padding-bottom: calc(10px + constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
  padding-bottom: calc(10px + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/
  .btn {
    // width: rem(166);
    height: rem(42);
    font-size: rem($font-size-middle);
    border: none;
    border-radius: 5px;
  }
  .btn:nth-child(1) {
    margin-right: rem($margin-10);
    background-color: $text-bg-color2;
  }
}
